<template>
  <div class="container">
    <el-pagination
      :background="background"
      :current-page.sync="currentPage"
      :pager-count="pagerCount"
      :page-size.sync="pageSize"
      :layout="layout"
      :total="total"
      v-bind="$attrs"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!-- :page-sizes="pageSizes" -->
  </div>
</template>

<script>
  export default {
    name: 'VabPagination',
    props: {
      total: {
        required: true,
        type: Number,
      },
      page: {
        type: Number,
        default: 1,
      },
      limit: {
        type: Number,
        default: 10,
      },
      pagerCount: {
        type: Number,
        default: 5,
      },
      pageSizes: {
        type: Array,
        default() {
          return [10, 20, 30, 50, 100]
        },
      },
      layout: {
        type: String,
        default() {
          return 'total, prev, pager, next, jumper'
        },
      },
      background: {
        type: Boolean,
        default: true,
      },
    },
    computed: {
      currentPage: {
        get() {
          return this.page
        },
        set(val) {
          this.$emit('update:page', val)
        },
      },
      pageSize: {
        get() {
          return this.limit
        },
        set(val) {
          this.$emit('update:limit', val)
        },
      },
    },
    methods: {
      handleSizeChange(val) {
        this.$emit('changeSize', val)
      },
      handleCurrentChange(val) {
        this.$emit('changePage', val)
      },
    },
  }
</script>

<style lang="scss" scoped>
  .container {
    background: #fff;
    // overflow-x: scroll;
  }
</style>
